<template>
	<view class="sms-confirm-main-box">
		<view class="sms-confirm-box">
			<image class="bg-image" mode="widthFix"
				src="https://h5.sx2b2c.com/images/common/smsConfirm/sms-confirm-bg.png"></image>
			<view class="form-box">
				<view class="mobile">手机号：{{mobile}}</view>
				<view class="input-box">
					<input class="input" type="number" maxlength="6" v-model="code" placeholder="请输入验证码">
				</view>
				<view class="submit-btn" @click="submitHandler">确认</view>
			</view>

		</view>
		<image class="close" @click="closeHandler" mode="widthFix" src="https://h5.sx2b2c.com/images/common/close.png">
		</image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import messageUtil from '@/utils/messageUtil';
	const props = defineProps(['mobile'])
	const emits = defineEmits(['success', 'cancel'])

	const code = ref('')

	const submitHandler = () => {
		if (code.value.length == 0) {
			messageUtil.showFail('验证码不能为空')
			return;
		}
		emits('success', code.value)
	}

	const closeHandler = () => {
		emits('cancel')
	}
</script>

<style lang="scss" scoped>
	.sms-confirm-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 2;
		flex-direction: column;

		.sms-confirm-box {
			width: 80%;
			box-sizing: border-box;
			position: relative;

			.bg-image {
				width: 100%;
				height: auto;
				display: block;
			}

			.form-box {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				padding-bottom: 42rpx;

				.mobile {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #030303;
					text-align: center;
				}

				.input-box {
					width: 530rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					border: 2px solid #2879FD;
					margin: 29rpx auto 0;

					.input {
						flex-grow: 1;
						height: 80rpx;
						box-sizing: border-box;
						font-family: SourceHanSansSC-Normal;
						font-size: 45rpx;
						letter-spacing: 3rpx;
						color: black;
						padding-left: 30rpx;

						&::-webkit-input-placeholder,
						&::-ms-input-placeholder {
							color: #1B1B1B;
							font-size: 45rpx;
						}

						&::-webkit-input-placeholder {
							color: #1B1B1B;
							font-size: 45rpx;
						}

						&::-moz-placeholder {
							color: #1B1B1B;
							font-size: 45rpx;
						}

					}
				}

				.submit-btn {
					width: 530rpx;
					height: 80rpx;
					background: #2879FD;
					border-radius: 40rpx;
					margin: 29rpx auto 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Alimama FangYuanTi VF;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}



		}

		.close {
			width: 50rpx;
			height: auto;
			display: block;
			margin-top: 30rpx;
		}
	}
</style>